:global{
    .topology-box{
        text-align: center;
    }
    .topology-children{
        text-align: center;
        margin-top: 30px;
        padding-top: 30px;
        border-top: 1px solid #ccc;
        position: relative;

        &.topology-only-one-children{
            border-top: none;
        }

        &:before{
            content: '';
            position: absolute;
            width: 1px;
            height: 30px;
            background: #ccc;
            bottom: 100%;
            left: 50%;
        }

        .topology-item{
            margin-left: 24px;
            position: relative;

            &:first-child{
                margin-left: 0;
                > .topology-label{
                    > .topology-label-wrap{
                        &:before{
                            content: '';
                            position: absolute;
                            left: 0;
                            width: 50%;
                            height: 1px;
                            background: #fff;
                            top: -32px;
                        }
                    }
                }
            }
            &:last-child{
                //> .topology-label{
                //    > .topology-label-wrap{
                //        &:before{
                //            content: '';
                //            position: absolute;
                //            left: 0;
                //            width: 50%;
                //            height: 1px;
                //            background: #fff;
                //            top: -32px;
                //        }
                //    }
                //}
                &:before{
                    content: '';
                    position: absolute;
                    right: -1px;
                    width: 50%;
                    height: 1px;
                    background: #fff;
                    top: -31px;
                }
            }
        }
    }
    .topology-item{
        display: inline-block;
        vertical-align: top;
        white-space: nowrap;
    }
    .topology-label{
        display: inline-block;
        position: relative;
    }
    .topology-label-wrap{
        position: relative;
        border: 1px solid #ccc;
    }
    .topology-top-line{
        position: absolute;
        top: -31px;
        left: 50%;
        width: 1px;
        height: 30px;
        background: #ccc;
    }
    .topology-bottom-line{
        position: absolute;
        width: 1px;
        height: 30px;
        top: 100%;
        left: 50%;
        background: #ccc;
    }
    .topology-right-children{
        position: absolute;
        left: 100%;
        text-align: left;
        top: 50%;
        margin-left: 30px;
        .topology-item{
            display: block;
            margin: 0;
            border-left: 1px solid #ccc;
            padding: 0 8px;
            border-bottom: 1px solid #ccc;

            &:first-child{
                border-left: none;
            }

            &:first-child,
            &:last-child{
                &:before{
                    display: none;
                }
            }
        }
        .topology-label-wrap{
            border: none;
        }
        .topology-top-line,
        .topology-bottom-line{
            display: none;
        }
    }
    .topology-right-line{
        position: absolute;
        width: 30px;
        height: 1px;
        background: #ccc;
        right: -31px;
        top: 50%;
    }
    .topology-toggle-btn{
        position: absolute;
        bottom: -18px;
        left: 50%;
        transform: translateX(-50%);
    }
    .topology-toggle-btn-r{
        position: absolute;
        right: -18px;
        top: 50%;
        transform: translateY(-50%);
    }
}
